import React, { useEffect, useState } from "react";
import { getSwiperList } from "network/Home";
import SearchPanel from "components/search-panel";
import Coupon from "components/coupon";
import ShopCate from "components/shop-cate";
import ShopSwiper from "components/common/shop-swiper";
import ShopImg from "components/common/shop-img";
import ShopNavItem from "components/common/shop-nav-item";
import Recommed from "components/common/recommed";

import BgSwiper from "components/bg-swiper";
import "./index.less";

function index() {
    const [swiperList, setSwiperList] = useState([]);
    const [shopNavItem, setShopNavItem] = useState([]);
    const [couponList, setCouponList] = useState([]);
    const [shopCateList, setShopCateList] = useState([]);
    const [recommedList, setRecommedList] = useState([]);
    const [bgUrl, setBgUrl] = useState([
        {
            bgUrl: "https://hotkidceo-1251330842.cos.ap-shanghai.myqcloud.com/2021070917090400594.gif",
        },
        {
            bgUrl: "https://hotkidceo-1251330842.cos.ap-shanghai.myqcloud.com/2021070817002700515.gif",
        },
    ]);

    useEffect(async () => {
        const { data } = await getSwiperList({ channelId: null, memberKey: "" });
        setSwiperList(data[1].configureAttribute);
        setShopNavItem(data[4].asseType == 17 ? data[4].configureAttribute : data[3].configureAttribute);
        setCouponList(data[6].asseType == 9 ? data[6].configureAttribute : data[5].configureAttribute);
        setShopCateList(data[7].asseType == 13 ? data[7].configureAttribute : data[8].configureAttribute);
        setRecommedList(
            data[9].asseName == "商品列表" ? data[9].configureAttributeList : data[10].configureAttributeList
        );
    }, []);

    return (
        <div className="home-container">
            <BgSwiper swiperList={swiperList} />

            <div className="main-content">
                <div className="shop-title">旺仔旺铺</div>
                <SearchPanel />
                <ShopSwiper swiperList={swiperList} />
                <ShopImg height={296} bgUrl={bgUrl[0].bgUrl} />
                <ShopImg height={112} bgUrl={bgUrl[1].bgUrl} />
                <ShopNavItem shopNavItem={shopNavItem} />
                <Coupon couponList={couponList} />
                <ShopCate shopCateList={shopCateList} />
                <div
                    style={{
                        background:
                            "url(http://hotkidceo-1251330842.cos.ap-shanghai.myqcloud.com/2020042321245500054.jpeg)",
                        backgroundSize: "cover",
                        height: "15px",
                        margin: "10px 0",
                    }}
                ></div>

                <Recommed recommedList={recommedList} />
            </div>
        </div>
    );
}

export default index;
